

<template>
  <div>
    <a-form layout="inline" :model="queryModel" v-if="searchBox">
      <a-form-item label="关键字">
        <a-input v-model:value="queryModel.keyWord" placeholder="请输入关键字" allow-clear />
      </a-form-item>
      <a-form-item label="状态">
        <a-select v-model:value="queryModel.status" placeholder="请选择角色状态">
          <a-select-option :value="1">禁止</a-select-option>
          <a-select-option :value="0">正常</a-select-option>
        </a-select>
      </a-form-item>
      <a-space>
        <a-button type="primary" @click="list">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-space>
    </a-form>
    <div class="functionBox">
      <a-space class="left">
        <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
        <a-popconfirm title="是否要真的批量删除这些角色嘛!" @confirm="remove()">
          <template #icon><question-circle-outlined style="color: red" /></template>
          <a-button type="dashed" :disabled="roleIds.length == 0" :icon="h(DeleteOutlined)">删除</a-button>
        </a-popconfirm>
      </a-space>
      <a-space class="right">
        <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list" />
        <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
      </a-space>
    </div>
    <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
      <a-table
          :columns="columns"
          @resizeColumn="handleResizeColumn"
          :rowKey="( record : Role ) => record.id"
          :row-selection="{ onChange: selectData }"
          :pagination="false"
          :locale="{ emptyText: '暂无数据' }"
          :data-source="tableData"
          :scroll="{ y: ( windowHeight - elementToTopHight - 216 ) + 'px' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 0" color="success">正常</a-tag>
            <a-tag v-if="record.status == 1" color="error">禁止</a-tag>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" @click="operator(1,record.id)">编辑</a-button>
            <a-popconfirm title="是否要真的删除这个角色嘛!" @confirm="remove([ record.id ])">
              <template #icon><question-circle-outlined style="color: red" /></template>
              <a-button type="link">删除</a-button>
            </a-popconfirm>
            <a-dropdown>
              <a-button type="link">
                更多操作
                <DownOutlined />
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="menuAllocate(record)">
                    <UnorderedListOutlined />
                    <span class="operationItem">分配菜单</span>
                  </a-menu-item>
                  <a-divider class="divider" />
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination
            size="small"
            :disabled="total == 0"
            :total="total"
            show-size-changer
            @change="pageChange"
            show-quick-jumper />
      </div>
    </div>


    <a-modal
        width="400px"
        v-model:open="operatorStore.open"
        :title="operatorStore.cmd == 0 ? '新增角色' : '编辑角色'"
        @ok="submitOperator"
        @cancel="resetFrom">
      <a-form
          :model="role"
          labelAlign="right"
          :label-col="{ style: { width: '80px' } }"
          :rules="rules"
          ref="formRef"
      >
        <a-form-item label="名称" name="name">
          <a-input v-model:value="role.name" placeholder="请输入角色名称" />
        </a-form-item>
        <a-form-item label="权限标识" name="permissionCode">
          <a-input v-model:value="role.permissionCode" placeholder="请输入岗位编号" />
        </a-form-item>
        <a-form-item label="排序" name="sortOrder">
          <a-input type="number" v-model:value="role.sortOrder" placeholder="请输入排序" />
        </a-form-item>
        <a-form-item label="状态">
          <a-radio-group v-model:value="role.status">
            <a-radio :value="1">禁止</a-radio>
            <a-radio :value="0">正常</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model:value="role.description" placeholder="可以尝试输入一些角色的描述..." :rows="4" />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
        width="520px"
        v-model:open="moduleStore.menu"
        title="分配菜单"
        :footer="null"
       >
      <AllocateMenu v-if="moduleStore.menu" :role="moduleStore.roleInfo" @sendRoleMenu="acceptRoleMenu"></AllocateMenu>
    </a-modal>
  </div>
</template>

<script setup lang="ts">

    import {h} from "vue";
    import {
      PlusOutlined, ReloadOutlined, SearchOutlined,
      QuestionCircleOutlined, DeleteOutlined, DownOutlined, UnorderedListOutlined , DatabaseOutlined
    } from "@ant-design/icons-vue";
    import useRole from "@/hooks/useRole";
    import type { Role } from "@/interface/Role";
    import DynamicHeight from "@/utils/DynamicHeight";
    import AllocateMenu from "@/components/System/AllocateMenu.vue";

    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    const {
      searchBox , list , operator , queryModel ,
      resetQuery , columns , tableData , selectData ,
      handleResizeColumn  , pageChange ,
      total , operatorStore , role , submitOperator ,
      resetFrom , rules , formRef , remove , roleIds ,
      menuAllocate , moduleStore , acceptRoleMenu
    } = useRole();


</script>

<style scoped lang="scss">
    .operationItem {
      margin-left: 6px !important;
    }
    .divider {
      margin: 0 !important;
    }
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
</style>
